<!--vue模板-->
<template>
  <el-dialog
    :model-value="visible"
    title="询价清单以及要求"
    width="1000"
    :close-on-click-modal="false"
    @close="cls"
  >
    <hr />
    <div>
      <el-form
        ref="formRel"
        :model="data2"
        label-width="150px"
        style="max-width: 1000px; margin-top: 20px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="询价日期:">
              <el-input
                v-model="data3.enquiryDate"
                placeholder="请输入"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物种类:">
              <el-input v-model="data3.type" placeholder="请输入" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="运输方式:">
              <el-input
                v-model="data3.transportway"
                placeholder="请输入"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物描述:">
              <el-input v-model="data3.type" placeholder="请输入" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="起始地:">
              <el-input v-model="data3.start" placeholder="请输入" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的地:">
              <el-input v-model="data3.end" placeholder="请输入" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报价条款:">
              <el-input placeholder="请输入" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="HS编码:">
              <el-input placeholder="请输入" readonly />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <hr />
    <!--表格数据-->
    <el-table
      ref="productRef"
      :data="tableData"
      style="width: 100%"
      stripe
      border
    >
      <el-table-column
        prop="pid"
        label="产品编号"
        width="100"
        header-align="center"
      />
      <el-table-column
        prop="productName"
        label="产品名称"
        width="100"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="num"
        label="数量"
        header-align="center"
        align="center"
      />
      <el-table-column label="总重量(KG)" header-align="center" align="center">
        <template #default="{ row }">
          {{ row.weight * row.num }}
          <!-- 计算总重量 -->
        </template>
      </el-table-column>
      <el-table-column label="总体积(CBM)" header-align="center" align="center">
        <template #default="{ row }">
          {{ row.size * row.num }}
          <!-- 计算总体积 -->
        </template>
      </el-table-column>
    </el-table>
    <br />
    <hr />
    <div>
      <el-form
        ref="formRel"
        :model="data2"
        label-width="150px"
        style="max-width: 1000px; margin-top: 20px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="报价条款:">
              <el-select v-model="data2.quotationClause" placeholder="请选择">
                <el-option label="CFR" value="CFR" />
                <el-option label="CIF" value="CIF" />
                <el-option label="DDU" value="DDU" />
                <el-option label="DAP" value="DAP" />
                <el-option label="DDP" value="DDP" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="RMB费用:">
              <el-input v-model="data2.rmb" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="海运费USD:">
              <el-input v-model="data2.usd" placeholder="请输入" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="目的港费用合计:">
              <el-input v-model="data2.targetMoney" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报价有效期:">
              <el-input v-model="data2.validTime" placeholder="请输入" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="海运费合计:">
              <el-input v-model="data2.total" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="船公司:">
              <el-input v-model="data2.boatCompany" placeholder="请输入" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="航次:">
              <el-input v-model="data2.voyage" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="航程:">
              <el-input v-model="data2.ranges" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传截图:">
              <el-upload
                class="avatar-uploader"
                :action="host + '/v1/upload/img'"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="save()">提交报价</el-button>
          <el-button type="info" @click="cls()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--分页-->
    <div style="height: 60px; line-height: 60px; background-color: #fff">
      <el-pagination
        background
        layout="sizes,total,prev, pager, next,jumper"
        :total="total"
        style="float: right; margin-right: 20px"
        @current-change="chpg"
        @size-change="chsize"
      />
    </div>
  </el-dialog>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { detail } from "../../api/product.js";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import host from "@/utils/env.js";
import { getUser } from "@/utils/session.js";
import { saveOffer } from "@/api/Enquiry.js";

//表格引用
const productRef = ref(null);
//表格数据
const tableData = ref([]);
const imageUrl = ref("");
//分页参数
const page = ref(1); //当前页数
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数
/**
 * 文件上传前的限制
 * @param rawFile
 */
const beforeAvatarUpload = rawFile => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("请上传jpg、png格式的文件");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片不能超过2MB!");
    return false;
  }
  return true;
};
/**
 * 上传成功
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess = (response, uploadFile) => {
  if (response.code == 200) {
    //上传成功
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
    data2.value.picurl = response.data;
  }
};

//改变当前页
function chpg(pg) {
  page.value = pg;
}
//改变每页记录数
function chsize(pgsize) {
  pageSize.value = pgsize;
  page.value = 1;
}

//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

//响应式对象
const data3 = ref({
  enquiryDate: "",
  type: "",
  transportway: "",
  start: "",
  end: ""
});
//响应式对象
const data2 = ref({
  userId: "",
  name: "", // 货代名称放到后台查询后赋值
  quotationClause: "",
  rmb: "",
  usd: "",
  targetMoney: "",
  validTime: "",
  total: "",
  boatCompany: "",
  voyage: "",
  ranges: "",
  picurl: "",
  hid: ""
});
//声明事件
const emits = defineEmits(["close", "choose"]);
const productName = ref("");
function clear() {
  if (productRef.value) productRef.value.clearSelection();
}
//查询产品
async function initProduct(row) {
  console.log("接收到的 row 数据>>>>>：", row); // 直接打印对象
  data3.value.enquiryDate = row.enquiryDate;
  data3.value.type = row.type;
  data3.value.transportway = row.transportway;
  data3.value.start = row.start;
  data3.value.end = row.end;
  data2.value.hid = row.cid;
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    eid: row.cid
  };
  let res = await detail(data);
  if (res.code == 200) {
    tableData.value = res.data.list;
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

// 从登录信息中获取
let user = getUser();
//保存报价
async function save() {
  data2.value.userId = user.id;
  data2.value.picurl = host + data2.value.picurl;
  console.log("data2.value.picurl>>>>>>：", data2.value.picurl);
  let res = await saveOffer(data2.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    //清空data2
    data2.value = {
      userId: "",
      name: "",
      quotationClause: "",
      rmb: "",
      usd: "",
      targetMoney: "",
      validTime: "",
      total: "",
      boatCompany: "",
      voyage: "",
      ranges: "",
      picurl: "",
      hid: ""
    };

    cls();
  }
}
//方法
function cls() {
  //通知父组件  我要关闭了
  emits("close");
}

//富文本编辑器

defineExpose({ clear, initProduct });
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  margin-left: 30px;
  margin-top: 20px;
  display: inline-block;

  border-style: none;
  border-left: #0054a6 solid 4px;
  padding-left: 10px;
}

:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
</style>
